<template>
	<view class="logistics">
		<view class="logistics-tips">
			<text>签收提示:需要本人凭签收码或本人身份证进行签收</text>
		</view>
		<view class="logistics-good">
			<view class="logistics-good-part">
				<view class="logistics-good-part-img">
					<image src="../static/20221011165448.jpg" mode="widthFix" style="width: 80%; height: 80%;"></image>
				</view>
				<view class="logistics-good-part-connet">
					<view class="logistics-good-part-connet-text">
						<view class="logistics-good-part-connet-text-title" style="height: 30%;font-size: 32rpx; color: black;">
							<text>iPhone 14</text>
						</view>
						<view class="logistics-good-part-connet-text-title">
							<text>套餐：iPhone 14 GB 午夜色</text>
						</view>
						<view class="logistics-good-part-connet-text-title">
							<text>租期：2022.10.10-2023.10.09</text>
						</view>
						<view class="logistics-good-part-connet-text-title">
							<text>总租金：￥3248.50(12期)</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="logistics-title">
			<view class="logistics-title-part">
				<view class="logistics-title-part-text">
					<text>商家发货物流</text>
				</view>
				<view class="logistics-line">				
				</view>
			</view>
		</view>
		<view class="logistics-connet">
			<view class="logistics-connet-part">
				<view class="logistics-connet-part-img">
					<image src="../../pagesA/static/logistics/door.png" mode="widthFix" style="width: 60%;height: 60%;"></image>
				</view>
				<view class="logistics-connet-part-title">
					<text>上门安装</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	page{
		width: 100%;
		height: 100%;
		background-color: #f7f7f7;
	}
	.logistics{
		width: 100%;
		height: 100%;
	}
	.logistics-tips{
		width: 100%;
		height: 60rpx;
		background-color: #fff6ed;
		color: #ed8e10;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.logistics-good{
		width: 100%;
		height: 320rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.logistics-good-part{
		width: 90%;
		height: 90%;
		background-color: white;
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.logistics-good-part-img{
		width: 260rpx;
		height: 100%;

		display: flex;
		justify-content: center;
		align-items: center;
	}
	.logistics-good-part-connet{
		width: calc( 100% - 260rpx );
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.logistics-good-part-connet-text{
		width: 100%;
		height: 90%;
		display: flex;
		align-content: space-between;
		flex-wrap: wrap;
	}
	.logistics-good-part-connet-text-title{
		width: 100%;
		height: 20%;
		font-size: 28rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: #7f7f7f;
	}
	.logistics-title{
		width: 100%;
		height: 100rpx;
		background-color: white;
		display: flex;
		justify-content: center;
	}
	.logistics-title-part{
		width: 240rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-content: space-between;
		flex-wrap: wrap;
	}
	.logistics-line{
		width: 100%;
		height: 4rpx;
		background-color: red;
	}
	.logistics-title-part-text{
		width: 100%;
		height: calc( 100% - 4rpx );
		font-size: 38rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.logistics-connet{
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
	}
	.logistics-connet-part{
		width: 90%;
		height: 100rpx;
		background-color: white;
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
	}
	.logistics-connet-part-img{
		width: 120rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.logistics-connet-part-title{
		width: calc( 100% - 120rpx );
		height: 100%;
		font-size: 36rpx;
		font-weight: bold;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
</style>
